Skip to content

[ResponseOps][Flapping] Update rule specific flapping tooltip UI#194086

Merged
JiaweiWu merged 7 commits intoelastic:mainfrom
JiaweiWu:update-rule-specific-flapping-ui
Oct 3, 2024
Merged

[ResponseOps][Flapping] Update rule specific flapping tooltip UI#194086
JiaweiWu merged 7 commits intoelastic:mainfrom
JiaweiWu:update-rule-specific-flapping-ui

Conversation

@JiaweiWu
Copy link
Copy Markdown
Contributor

@JiaweiWu JiaweiWu commented Sep 26, 2024 •
edited by kibanamachine
Loading

Summary

Updates the rule specific flapping UI according to the finalized figma designs: https://www.figma.com/design/eTr6WsKzhSLcQ24AlgrY8R/Flapping-per-Rule--%3E-%23294?node-id=5265-28064&node-type=instance&t=GX5pGpXe1blP0x0G-0

Screenshot 2024-09-25 at 8 56 47 PM Screenshot 2024-09-25 at 9 23 30 PM

To test:

  1. Turn IS_RULE_SPECIFIC_FLAPPING_ENABLED to true.
  2. Navigate to rule create/edit flyout and you should see the new tooltips based on the figma designs linked above.

Checklist

@JiaweiWu JiaweiWu added release_note:skip Skip the PR/issue when compiling release notes Team:ResponseOps Platform ResponseOps team (formerly the Cases and Alerting teams) t// v9.0.0 backport:prev-minor v8.16.0 labels Sep 26, 2024
@JiaweiWu JiaweiWu requested a review from a team as a code owner September 26, 2024 04:26
@elasticmachine
Copy link
Copy Markdown
Contributor

elasticmachine commented Sep 26, 2024

Pinging @elastic/response-ops (Team:ResponseOps)

@adcoelho
Copy link
Copy Markdown
Contributor

adcoelho commented Sep 30, 2024

I got some weird scenario where I couldn't close the popovers.

Screen.Recording.2024-09-30.at.21.06.56.mov

@JiaweiWu JiaweiWu mentioned this pull request Oct 1, 2024
Merged
1 task
@JiaweiWu
Copy link
Copy Markdown
Contributor Author

JiaweiWu commented Oct 1, 2024

@elasticmachine merge upstream

@JiaweiWu
Copy link
Copy Markdown
Contributor Author

JiaweiWu commented Oct 1, 2024

I got some weird scenario where I couldn't close the popovers.

Fixed!

ersin-erdal
ersin-erdal approved these changes Oct 1, 2024
View reviewed changes
Copy link
Copy Markdown
Contributor

@ersin-erdal ersin-erdal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Zacqary
Zacqary approved these changes Oct 1, 2024
View reviewed changes
Copy link
Copy Markdown
Contributor

@Zacqary Zacqary left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code changes LGTM, just get this test fixed. Feel free to merge on green CI

Comment thread ...ins/triggers_actions_ui/public/application/sections/rule_form/rule_form_advanced_options.tsx Outdated
const {
application: {
capabilities: {
rulesSettings: { writeFlappingSettingsUI },
Copy link
Copy Markdown
Contributor

@Zacqary Zacqary Oct 1, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This needs to be mocked in x-pack/plugins/monitoring/public/alerts/alert_form.test.tsx

Copy link
Copy Markdown
Contributor Author

@JiaweiWu JiaweiWu Oct 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice catch!

@JiaweiWu JiaweiWu enabled auto-merge (squash) October 3, 2024 02:03
@kibana-ci
Copy link
Copy Markdown

kibana-ci commented Oct 3, 2024

💛 Build succeeded, but was flaky

Failed CI Steps

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
triggersActionsUi 1.6MB 1.6MB +3.3KB

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

@JiaweiWu JiaweiWu merged commit aab80bd into elastic:main Oct 3, 2024
@kibanamachine
Copy link
Copy Markdown
Contributor

kibanamachine commented Oct 3, 2024

Starting backport for target branches: 8.x

https://github.com/elastic/kibana/actions/runs/11155541451

kibanamachine added a commit to kibanamachine/kibana that referenced this pull request Oct 3, 2024
@JiaweiWu @kibanamachine @elasticmachine
[ResponseOps][Flapping] Update rule specific flapping tooltip UI (ela…
0708de8 
…stic#194086)

## Summary
Updates the rule specific flapping UI according to the finalized figma
designs:
https://www.figma.com/design/eTr6WsKzhSLcQ24AlgrY8R/Flapping-per-Rule--%3E-%23294?node-id=5265-28064&node-type=instance&t=GX5pGpXe1blP0x0G-0

<img width="798" alt="Screenshot 2024-09-25 at 8 56 47 PM"
src="https://github.com/user-attachments/assets/2655a3cd-8097-442e-a3c0-71ab40675e31">
<img width="588" alt="Screenshot 2024-09-25 at 9 23 30 PM"
src="https://github.com/user-attachments/assets/e40b43be-f5a5-4d80-a35c-c3032e017b56">

### To test:
1. Turn `IS_RULE_SPECIFIC_FLAPPING_ENABLED` to `true`.
2. Navigate to rule create/edit flyout and you should see the new
tooltips based on the figma designs linked above.

### Checklist
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
(cherry picked from commit aab80bd)
@kibanamachine kibanamachine mentioned this pull request Oct 3, 2024
Merged
@kibanamachine
Copy link
Copy Markdown
Contributor

kibanamachine commented Oct 3, 2024

💚 All backports created successfully

Status Branch Result
✅ 8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

kibanamachine added a commit that referenced this pull request Oct 3, 2024
@kibanamachine @JiaweiWu
[8.x] [ResponseOps][Flapping] Update rule specific flapping tooltip UI (
c8fdb03 
#194086) (#194779)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[ResponseOps][Flapping] Update rule specific flapping tooltip UI
(#194086)](#194086)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Jiawei
Wu","email":"74562234+JiaweiWu@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-10-03T03:48:11Z","message":"[ResponseOps][Flapping]
Update rule specific flapping tooltip UI (#194086)\n\n##
Summary\r\nUpdates the rule specific flapping UI according to the
finalized
figma\r\ndesigns:\r\nhttps://www.figma.com/design/eTr6WsKzhSLcQ24AlgrY8R/Flapping-per-Rule--%3E-%23294?node-id=5265-28064&node-type=instance&t=GX5pGpXe1blP0x0G-0\r\n\r\n<img
width=\"798\" alt=\"Screenshot 2024-09-25 at 8 56
47 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/2655a3cd-8097-442e-a3c0-71ab40675e31\">\r\n<img
width=\"588\" alt=\"Screenshot 2024-09-25 at 9 23
30 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/e40b43be-f5a5-4d80-a35c-c3032e017b56\">\r\n\r\n###
To test:\r\n1. Turn `IS_RULE_SPECIFIC_FLAPPING_ENABLED` to `true`.\r\n2.
Navigate to rule create/edit flyout and you should see the
new\r\ntooltips based on the figma designs linked above.\r\n\r\n###
Checklist\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"aab80bdee97a20e13e1b7ab83971088f1a6b447e","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:ResponseOps","v9.0.0","backport:prev-minor","v8.16.0"],"title":"[ResponseOps][Flapping]
Update rule specific flapping tooltip
UI","number":194086,"url":"https://github.com/elastic/kibana/pull/194086","mergeCommit":{"message":"[ResponseOps][Flapping]
Update rule specific flapping tooltip UI (#194086)\n\n##
Summary\r\nUpdates the rule specific flapping UI according to the
finalized
figma\r\ndesigns:\r\nhttps://www.figma.com/design/eTr6WsKzhSLcQ24AlgrY8R/Flapping-per-Rule--%3E-%23294?node-id=5265-28064&node-type=instance&t=GX5pGpXe1blP0x0G-0\r\n\r\n<img
width=\"798\" alt=\"Screenshot 2024-09-25 at 8 56
47 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/2655a3cd-8097-442e-a3c0-71ab40675e31\">\r\n<img
width=\"588\" alt=\"Screenshot 2024-09-25 at 9 23
30 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/e40b43be-f5a5-4d80-a35c-c3032e017b56\">\r\n\r\n###
To test:\r\n1. Turn `IS_RULE_SPECIFIC_FLAPPING_ENABLED` to `true`.\r\n2.
Navigate to rule create/edit flyout and you should see the
new\r\ntooltips based on the figma designs linked above.\r\n\r\n###
Checklist\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"aab80bdee97a20e13e1b7ab83971088f1a6b447e"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/194086","number":194086,"mergeCommit":{"message":"[ResponseOps][Flapping]
Update rule specific flapping tooltip UI (#194086)\n\n##
Summary\r\nUpdates the rule specific flapping UI according to the
finalized
figma\r\ndesigns:\r\nhttps://www.figma.com/design/eTr6WsKzhSLcQ24AlgrY8R/Flapping-per-Rule--%3E-%23294?node-id=5265-28064&node-type=instance&t=GX5pGpXe1blP0x0G-0\r\n\r\n<img
width=\"798\" alt=\"Screenshot 2024-09-25 at 8 56
47 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/2655a3cd-8097-442e-a3c0-71ab40675e31\">\r\n<img
width=\"588\" alt=\"Screenshot 2024-09-25 at 9 23
30 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/e40b43be-f5a5-4d80-a35c-c3032e017b56\">\r\n\r\n###
To test:\r\n1. Turn `IS_RULE_SPECIFIC_FLAPPING_ENABLED` to `true`.\r\n2.
Navigate to rule create/edit flyout and you should see the
new\r\ntooltips based on the figma designs linked above.\r\n\r\n###
Checklist\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"aab80bdee97a20e13e1b7ab83971088f1a6b447e"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Jiawei Wu <74562234+JiaweiWu@users.noreply.github.com>
tiansivive pushed a commit to tiansivive/kibana that referenced this pull request Oct 7, 2024
@JiaweiWu @kibanamachine
@elasticmachine @tiansivive
[ResponseOps][Flapping] Update rule specific flapping tooltip UI (ela…
ec08d43 
…stic#194086)

## Summary
Updates the rule specific flapping UI according to the finalized figma
designs:
https://www.figma.com/design/eTr6WsKzhSLcQ24AlgrY8R/Flapping-per-Rule--%3E-%23294?node-id=5265-28064&node-type=instance&t=GX5pGpXe1blP0x0G-0

<img width="798" alt="Screenshot 2024-09-25 at 8 56 47 PM"
src="https://github.com/user-attachments/assets/2655a3cd-8097-442e-a3c0-71ab40675e31">
<img width="588" alt="Screenshot 2024-09-25 at 9 23 30 PM"
src="https://github.com/user-attachments/assets/e40b43be-f5a5-4d80-a35c-c3032e017b56">

### To test:
1. Turn `IS_RULE_SPECIFIC_FLAPPING_ENABLED` to `true`.
2. Navigate to rule create/edit flyout and you should see the new
tooltips based on the figma designs linked above.

### Checklist
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
JiaweiWu added a commit that referenced this pull request Oct 10, 2024
@JiaweiWu @kibanamachine @elasticmachine
[ResponseOps][Flapping] Add Rule Specific Flapping Form to New Rule F…
447617e 
…orm Page (#194516)

## Summary

Depends on: #194086
Designs:
https://www.figma.com/design/eTr6WsKzhSLcQ24AlgrY8R/Flapping-per-Rule--%3E-%23294?node-id=5265-29867&node-type=frame&t=1VfgdlcjkSHmpbje-0

Adds the rule specific flapping form to the new rule form page. 

## To test:

1. change `IS_RULE_SPECIFIC_FLAPPING_ENABLED` to true 
2. run `yarn start --run-examples`
3. assert the new flapping UI exists by going to developer examples ->
create/edit rule

<img width="1162" alt="Screenshot 2024-09-30 at 11 43 16 PM"
src="https://github.com/user-attachments/assets/a1275a49-f2ed-43ce-815b-5c0bd93770e5">

### Checklist
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
kibanamachine added a commit to kibanamachine/kibana that referenced this pull request Oct 10, 2024
@JiaweiWu @kibanamachine @elasticmachine
[ResponseOps][Flapping] Add Rule Specific Flapping Form to New Rule F…
698e416 
…orm Page (elastic#194516)

## Summary

Depends on: elastic#194086
Designs:
https://www.figma.com/design/eTr6WsKzhSLcQ24AlgrY8R/Flapping-per-Rule--%3E-%23294?node-id=5265-29867&node-type=frame&t=1VfgdlcjkSHmpbje-0

Adds the rule specific flapping form to the new rule form page.

## To test:

1. change `IS_RULE_SPECIFIC_FLAPPING_ENABLED` to true
2. run `yarn start --run-examples`
3. assert the new flapping UI exists by going to developer examples ->
create/edit rule

<img width="1162" alt="Screenshot 2024-09-30 at 11 43 16 PM"
src="https://github.com/user-attachments/assets/a1275a49-f2ed-43ce-815b-5c0bd93770e5">

### Checklist
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
(cherry picked from commit 447617e)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Zacqary Zacqary Zacqary approved these changes

@ersin-erdal ersin-erdal ersin-erdal approved these changes

Assignees

No one assigned

Labels

release_note:skip Skip the PR/issue when compiling release notes Team:ResponseOps Platform ResponseOps team (formerly the Cases and Alerting teams) t// v8.16.0 v9.0.0

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

7 participants

@JiaweiWu @elasticmachine @adcoelho @kibana-ci @kibanamachine @Zacqary @ersin-erdal